<template>
  <div>
    <el-row type="flex" justify="center" :gutter="50">
      <el-col :span="11"
        >单价(元/平米):
        <el-input v-model="price" placeholder="请输入内容" />
        面积(平方米):
        <el-input v-model="area" placeholder="请输入内容" />
        按揭成数:
        <el-select v-model="ratio" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <br />
        按揭年数:

        <el-select v-model="year" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
        ><br />
        贷款利率:
        <el-input v-model="rate" placeholder="请输入内容" />

        <el-button type="primary" plain @click="Submit">提交</el-button>
        <el-button type="info" plain>重置</el-button>
      </el-col>
      <el-col :span="11"
        >房款总额:
        <el-input v-model="input" :disabled="true" />
        贷款总额(元):
        <el-input v-model="input" :disabled="true" />
        还款总额(元):
        <el-input v-model="input" :disabled="true" />
        支付利息款(元):
        <el-input v-model="input" :disabled="true" />
        贷款月数(元):
        <el-input v-model="input" :disabled="true" />
        月均还款(元):
        <el-input v-model="input" :disabled="true" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: "",
      area: "",
      ratio: "",
      year: "",
      rate: "",
      mode: 1,
      input: "",
      options1: [
        {
          value: 10,
          label: 10,
        },
        {
          value: 9,
          label: 9,
        },
        {
          value: 8,
          label: 8,
        },
        {
          value: 7,
          label: 7,
        },
        {
          value: 6,
          label: 6,
        },
      ],
      options2: [
        {
          value: 50,
          label: 50,
        },
        {
          value: 40,
          label: 40,
        },
        {
          value: 30,
          label: 30,
        },
        {
          value: 20,
          label: 20,
        },
        {
          value: 10,
          label: 10,
        },
      ],
    };
  },
  methods: {
    Submit() {
      var data =
        "price=" +
        this.price +
        "&area=" +
        this.area +
        "&ratio=" +
        this.ratio +
        "&year=" +
        this.year +
        "&rate=" +
        this.rate +
        "&mode=" +
        this.mode;
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "http://localhost:8888/springbootclass/MCalculator");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(data);
      xhr.onreadystatechange = function () {
        //判断
        if (xhr.readyState === 4) {
          //判断响应的状态 200 404 403 401 500
          //2xx 成功
          if (xhr.status >= 200 && xhr.status < 300) {
            //处理结果 行 头 空行 体
            //响应
            //console.log(xhr.status);//状态码
            //console.log(xhr.statusText)//状态字符串
            //console.log(xhr.getAllResponseHeaders());//所有响应头
            //console.log(xhr.response);//响应体

            //设置result的文本
            // result.innerHTML = xhr.response;
            console.log(xhr.response);
          } else {
            alert(xhr.response.mesg);
          }
        }
      };
      // const requrl = "/";
      // this.$axios
      //   .post("/", {
      //     // price: 3000,
      //     // area: 100,
      //     // ratio: 8,
      //     // year: 20,
      //     // rate: 4.9,
      //     // mode: 1,
      //   })
      //   .then((response) => {
      //     if (response.data) {
      //       console.log(response.data);
      //     }
      //   })
      //   .catch((err) => {
      //     alert("请求失败");
      //   });
    },
  },
};
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #67c23a;
}
.bg-purple-light {
  background: #e6a23c;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>